<template>
    <div class="container">
        <div class="icon" style="--icon: url(/favicon.png)"></div>
        <h2 class="title">项目管理系统</h2>
        <p class="sub-title">登录您的账户</p>
        <div class="input-group">
            <Input1 type="text" title="用户名" icon="/icon/user.svg" value="" placeholder="输入用户名" @onchange=""></Input1>
            <Input1 type="password" title="密码" icon="/icon/password.svg" value="" placeholder="输入密码" @onchange=""></Input1>
        </div>
        <div class="checkbox-group">
            <CheckBox1 text="记住我"></CheckBox1>
        </div>
        <div class="btn-group">
            <Button1 text="登录" @click="login.login"></Button1>
        </div>
        <div class="copy-right">laoyu项目归档系统 © 2025</div>
    </div>
</template>

<script setup>
import Input1 from '@/components/input/Input1.vue';
import CheckBox1 from '@/components/input/CheckBox1.vue';
import Button1 from '@/components/button/Button1.vue';

import { login } from '@/service/auth/login.js';
</script>

<style scoped lang="less">
.container {
    box-sizing: border-box;
    width: 28vw;
    padding: 2vw;
    background-color: #fff;
    border: 0.05vw solid rgb(59, 130, 246);
    border-radius: 0.5vw;
    box-shadow: 0 0 0.5vw #88888830;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;

    .icon {
        --size: 4vw;
        width: var(--size);
        height: var(--size);
    }

    .title {
        font-size: 1.5vw;
    }

    .sub-title {
        font-size: 0.9vw;
        color: #6b7280;
    }

    .input-group {
        width: 100%;
        margin-top: 2vw;
        display: flex;
        flex-direction: column;
        gap: 1vw
    }

    .checkbox-group {
        margin: 1vw 0;
    }

    .checkbox-group, .btn-group {
        width: 100%;
    }

    .copy-right {
        margin-top: 2vw;
        font-size: 0.8vw;
        color: #6b7280;
    }
}
</style>